<style lang="less" scoped>
.loadState {
  display: block;
  text-align: center;
}
.tabAfter {
  border-top: 1px solid #E9E9E9;
  .tabOne {
    position: relative;
  }
  .tabOne:after {
    content: '';
    height: 14px;
    width: 1px;
    background: #eee;
    display: block;
    position: absolute;
    top: 15px;
    right: 0;
  }
}
.h-video{
  margin-top: 10px;
}
.h-video:first-child{
  margin-top: 0;
}
.mint-tab-container{
  overflow-x: hidden;
  width:100%;
  min-height: 400px;
}
.title{
  width:90%;
  background: #FFFFFF;
  padding:10px 5%;
  display: flex;
  flex-direction: row;
}
@media screen and (max-width: 320px) {
  iframe{
    height:204px!important;
  }
  /*.iframe1{*/
    /*height:204px!important;*/
  /*}*/
}
@media screen and (max-width:375px) and (min-width:321px) {
  iframe{
    height:235px!important;
  }
  /*.iframe1{*/
    /*height:235px!important;*/
  /*}*/
}
@media screen and (min-width: 376px){
  iframe{
    height:258px!important;
  }
  /*.iframe1{*/
    /*height:258px!important;*/
  /*}*/
}



</style>
<style>
  .tvp_poster_img{
    background-size:cover!important;
  }
</style>

<template>
<div :style="{ fontSize:fontSize + 'px'}" style="background: #EDF1F5;height: 100%">
<v-noticebar></v-noticebar>
<v-header
  title="宽博士电台" rightIcon="icon-tubiaozhizuomoban"
  v-on:clickRightIcon="$router.push('/videoSearch')"
></v-header>
<v-networkerr v-if="!$store.state.networkState"
  v-on:reload="findDataByPage"></v-networkerr>
<div v-else>
<tab style="position: fixed;top: 61px;width: 100%;z-index: 999999;" v-model="idx"
      defaultColor="rgba(102, 102, 102, 0.5)"
      active-color="#4D63EB"
      class="tabAfter"
      custom-bar-width="50px">
  <tab-item class="tabOne"><p>最新直播</p></tab-item>
  <tab-item><p>往期节目</p></tab-item>
</tab>
<div style="margin-top: 105px">
  <div v-if="!loadOver"></div>
  <div v-else v-show="!loadIdx">
    <iframe frameborder="0" width="100%" height="auto" :src="src2[0].url" allowfullscreen="false" webkitallowfullscreen="false" id="frame1"></iframe>
    <div class="title">
      <p style="color: #f69877;">{{src2[0].title}}&nbsp;</p>
    </div>
  </div>
  <div v-show="loadIdx">
    <div v-if="!loadOver"></div>
    <div
      v-else
      v-infinite-scroll="findDataByPage"
      :infinite-scroll-disabled="loadIdx"
      infinite-scroll-immediate-check>
      <div class="h-video" v-for="(value,key,index) in src2">
        <iframe class="iframe1" frameborder="0" width="100%" height="auto" :src="value.url">
        </iframe>
        <div class="title">
          <p style="color: #f69877;">{{value.title}}&nbsp;</p>
        </div>
      </div>
    </div>
    <load-more v-show="!isOver" tip="正在加载"></load-more>
    <load-more v-show="isOver" :show-loading="false" tip="暂无数据" background-color="#fbf9fe"></load-more>
  </div>
  </div>
</div>
</div>
</template>

<script>
  import { Tab, TabItem, LoadMore } from 'vux'
  import { TabContainer, TabContainerItem } from 'mint-ui'
  import axios from 'axios'
  import host from '../config'

  let token = window.localStorage.getItem('token')
  let ajax = axios.create({
      //baseURL: 'http://192.168.3.2:5555/api',
    baseURL: 'https://mb.quantsgeek.com/api',
    headers: {
      Authorization: token
    },
    timeout: host.timeout,
    transformResponse: [function (data) {
      return JSON.parse(data).data;
    }]
  })

  export default {
    components: {
      Tab,
      TabItem,
      LoadMore
    },
    data () {
      return {
        token: null,
        fontSize: 10,
        idx: 0,
        videos: [],
        src1: null,
        loadOver: false,
        loadIdx: false,
        src2: [],
        isLoading: false,
        isOver: false,
        lastVideo: 0
      }
    },
    watch: {
      idx: function (val) {
        val ? this.loadIdx = true : this.loadIdx = false
      }
    },
    methods: {
      findDataByPage () {
        if (this.isLoading) return
        if (this.isOver) return
        this.isLoading = true
        let u = navigator.userAgent;
        let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
        ajax.get(`/video/history?size=5&id=${this.lastVideo}`).then((res) => {
          if (!this.loadOver) this.loadOver = true
          if(isAndroid == true) {
            for (var i = 0;i < res.data.length; i++) {
              res.data[i].url = res.data[i].url.replace("https","http")
            }
          }
          this.src2 = this.src2.concat(res.data)
          this.isLoading = false
          if (res.data[4] && res.data[4]._id) {
            this.lastVideo = res.data[4]._id
          } else {
            this.isOver = true
          }
        }).catch((err) => {
          if (err.toString().indexOf('timeout') > -1) this.$store.state.networkState = false
        })
      }
    },

    created () {
      this.fontSize = this.fontSize * document.body.offsetWidth / 320
      this.findDataByPage()
    }
  }
</script>
